<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./element_plus/el_p.css" />
    <link rel="stylesheet" href="test.css">
    <style>
        #node-info {
            position: fixed;
            right: 10px;
            top: 10px;
            background-color: rgb(236, 233, 233);
            width: 400px;
            height: 400px;
            border-radius: 5px;
            padding: 5px;
            box-shadow: 0px 0px 10px 0px;
            /* opacity: 0; */
        
        }
        .classInfo{
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        .icon-outer{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-right: 5px;
        }
        .svg-icon{
            width: 22px;
            height: 22px;
            align-self: center;

        }
    </style>
</head>

<body>
    <div id="tt"></div>
    <div id="graphContainer"></div>
    <div id="node-info" @click="printData">
        <div  v-show="show">
            <div class="classInfo">
                <span class="icon-outer"><svg t="1705888454369" class="svg-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10242" width="200" height="200"><path d="M590.222222 73.955556L859.022222 342.254933V876.088889c0 37.700267-30.5664 68.266667-68.266666 68.266667H233.244444c-37.700267 0-68.266667-30.5664-68.266666-68.266667V142.222222c0-37.700267 30.5664-68.266667 68.266666-68.266666h356.977778z m-11.764622 28.444444H233.244444a39.822222 39.822222 0 0 0-39.799466 38.456889L193.422222 142.222222v733.866667a39.822222 39.822222 0 0 0 38.456889 39.799467L233.244444 915.911111h557.511112a39.822222 39.822222 0 0 0 39.799466-38.456889L830.577778 876.088889V354.053689L578.4576 102.4z" fill="#7CB305" p-id="10243"></path><path d="M854.755556 370.648178h-215.1424c-45.528178 0-82.551467-36.431644-83.5072-81.737956l-0.017067-1.792V73.955556h28.444444v213.162666c0 29.895111 23.819378 54.232178 53.515378 55.062756l1.564445 0.022755h215.1424v28.444445z" fill="#7CB305" p-id="10244"></path><path d="M56.888889 489.244444m28.444444 0l853.333334 0q28.444444 0 28.444444 28.444445l0 284.444444q0 28.444444-28.444444 28.444445l-853.333334 0q-28.444444 0-28.444444-28.444445l0-284.444444q0-28.444444 28.444444-28.444445Z" fill="#7CB305" p-id="10245"></path><path d="M201.824711 760.206222c24.837689 0 46.08-9.472 62.213689-28.16l-24.064-28.672c-8.96 9.728-20.992 17.408-36.352 17.408-26.885689 0-44.288-22.016-44.288-59.904 0-37.12 20.224-59.136 44.8-59.136 13.562311 0 23.552 6.144 33.28 14.848l23.802311-29.184c-13.050311-13.312-33.024-24.832-57.856-24.832-48.384 0-90.874311 36.352-90.874311 99.84 0 64.512 40.96 97.792 89.338311 97.792z m210.181689-3.584v-38.4h-74.24V565.902222h-45.824V756.622222h120.064z m55.546311 0l11.013689-43.776h56.32L545.883022 756.622222h48.128L534.8864 565.902222h-54.784L420.9664 756.622222h46.592z m58.629689-79.104h-38.912l4.096-16.128c4.864-18.944 9.978311-41.216 14.586311-61.184h1.024c5.12 19.456 9.984 42.24 15.104 61.184l4.096 16.128z m146.944 82.688c46.08 0 72.704-27.904 72.704-59.648 0-26.88-14.085689-42.752-37.637689-52.224l-23.802311-9.472c-16.896-6.656-28.672-10.752-28.672-21.504 0-9.984 8.442311-15.616 22.528-15.616 14.848 0 26.624 5.12 39.168 14.592l22.784-28.672c-16.64-16.64-39.936-25.088-61.952-25.088-40.448 0-69.12 25.6-69.12 57.6 0 27.648 18.688 44.288 38.656 52.224l24.32 10.24c16.384 6.912 26.88 10.496 26.88 21.504 0 10.24-7.936 16.64-24.832 16.64-15.109689 0-32.768-7.936-46.08-19.456l-26.112 31.488c19.712 18.176 46.330311 27.392 71.168 27.392z m163.578311 0c46.08 0 72.704-27.904 72.704-59.648 0-26.88-14.08-42.752-37.626311-52.224l-23.808-9.472c-16.896-6.656-28.672-10.752-28.672-21.504 0-9.984 8.442311-15.616 22.528-15.616 14.848 0 26.624 5.12 39.168 14.592l22.784-28.672c-16.64-16.64-39.936-25.088-61.952-25.088-40.448 0-69.12 25.6-69.12 57.6 0 27.648 18.688 44.288 38.650311 52.224l24.32 10.24c16.384 6.912 26.885689 10.496 26.885689 21.504 0 10.24-7.936 16.64-24.832 16.64-15.109689 0-32.768-7.936-46.08-19.456l-26.112 31.488c19.706311 18.176 46.330311 27.392 71.168 27.392z" fill="#FFFFFF" p-id="10246"></path></svg></span>
                <span>{{selectNode?.id}}</span>
            </div>
            <div class="classInfo">
                <span class="icon-outer"><svg t="1705889396496" class="svg-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15079" width="200" height="200"><path d="M920.64 216.07a32.37 32.37 0 0 0-35.94-36.41c-99.41-1.93-198.92 0-298.53-0.87v-76.2H530.5c-142.67 26.01-285.43 50.86-428.1 76.39V845.6c141.99 25.43 283.98 49.7 425.98 75.81h57.8v-74.85h279.36c15.89-0.96 33.43 0 47.01-9.63 10.89-17.24 8.09-38.53 9.05-57.8-0.96-187.37 0.68-375.4-0.96-563.06zM449.16 669.2H242.44V378.76h205.95v51.47h-145v62.23h138.9v51.47h-138.9v73.79h153.22l-7.45 51.48z m444.12 147.78H586.17v-76.2h241.98v-38.53H586.17v-47.2h241.98v-38.54H586.17v-47.2h241.98v-38.53H586.17v-48.16h241.98v-37.09H586.17v-48.16h241.98V359.8H586.17v-47.68h241.98v-38.05H586.17V207.4h307.11v609.58z" fill="#040000" p-id="15080"></path></svg></span>
                <span>{{selectNode?.fileName}}</span>
            </div>
            <div class="classInfo">
                <span class="icon-outer"><svg t="1705889544994" class="svg-icon" viewBox="0 0 1142 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2361" width="200" height="200"><path d="M1102.769231 39.384615v945.23077H39.384615V39.384615h1063.384616m0-39.384615H39.384615a39.384615 39.384615 0 0 0-39.384615 39.384615v945.23077a39.384615 39.384615 0 0 0 39.384615 39.384615h1063.384616a39.384615 39.384615 0 0 0 39.384615-39.384615V39.384615a39.384615 39.384615 0 0 0-39.384615-39.384615z" fill="#4D4D4D" p-id="2362"></path><path d="M39.384615 393.846154h1063.384616v39.384615H39.384615zM39.384615 590.769231h1063.384616v39.384615H39.384615zM39.384615 787.692308h1063.384616v39.384615H39.384615zM39.384615 196.923077h1063.384616v39.384615H39.384615z" fill="#B3B3B3" p-id="2363"></path><path d="M315.076923 196.923077v787.692308H275.692308V196.923077zM590.769231 196.923077v787.692308h-39.384616V196.923077zM866.461538 196.923077v787.692308h-39.384615V196.923077z" fill="#B3B3B3" p-id="2364"></path><path d="M39.384615 39.384615h1063.384616v157.538462H39.384615z" fill="#05AFC8" p-id="2365"></path></svg></span>
                <span>{{selectNode?.sheetName}}</span>
            </div>
    
            <div v-for="(value,key,index) in tags" v-if="tags">
                <div>------{{key}}---------</div>
                <div v-for="field in value">
                    <div>
                        <span>{{field.name}}</span>
                        <el-tag class="ml-2" type="success">{{field.fieldTypeGroupByTag[key]}}</el-tag>
                    </div>
                </div>
    
            </div>
        </div>

    </div>

    <script src="./js/vue3.js"></script>
    <script src="./element_plus/el_p.js"></script>
    <script src="./js/G6.JS"></script>
    <script src="./data.js"></script>
    <script>
        const { createApp, ref, onMounted } = Vue


        //handleData

        createApp({

            setup() {
                const show = ref(false)
                const selectNode = ref({})
                const tags = ref({})
                const printData = () => {
                    console.log(selectNode);
                }
                let g6Graph;
                onMounted(() => {
                    g6Init();

                    g6Graph.data(data);
                    g6Graph.render();
                })


                const g6Init = () => {
                    const minimap = new G6.Minimap({
                        size: [100, 100],
                        className: 'minimap',
                        type: 'delegate',
                    });
                    const grid = new G6.Grid();
                    const graph = new G6.Graph({
                        container: "graphContainer",
                        width: window.innerWidth,
                        height: window.innerHeight,
                        plugins: [minimap, grid],
                        layout: {
                            type: "force",
                            preventOverlap: true,
                            linkDistance: 200
                        },
                        modes: {
                            default: ['drag-canvas', 'zoom-canvas', 'drag-node'], // 允许拖拽画布、放缩画布、拖拽节点
                        },
                        nodeStateStyles: {
                            // 鼠标 hover 上节点，即 hover 状态为 true 时的样式
                            hover: {
                                fill: 'lightsteelblue',
                            },
                        },
                        defaultNode: {
                            size: [150, 30], // 节点大小
                            type: "rect"
                        },
                        defaultEdge: {
                            style: {
                                endArrow: {
                                    path: G6.Arrow.vee(10, 10, 0), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
                                    d: 0,
                                    fill: "black"
                                },
                                stroke: 'black',
                                lineWidth: 1,
                            }

                        }
                    })
                    g6Graph = graph;

                    // 点击节点
                    graph.on('node:click', (e) => {
                        // 先将所有当前是 click 状态的节点置为非 click 状态
                        const clickNodes = graph.findAllByState('node', 'click');
                        clickNodes.forEach((cn) => {
                            graph.setItemState(cn, 'click', false);
                        });
                        const nodeItem = e.item; // 获取被点击的节点元素对象
                        graph.setItemState(nodeItem, 'hover', true); // 设置当前节点的 hover 状态为 true
                        let itemData = nodeItem._cfg.model
                        console.log(itemData);
                        selectNode.value = itemData
                        tags.value = itemData["fieldDefinesGroupByTag"]
                        // let keys = Object.keys[tags.value]
                        // keys.forEach(key=>{
                        //     let list = tags.value[key]
                        //     list.forEach( field=>{
                        //         field.fieldTypeGroupByTag
                        //     })
                        // })
                        show.value = true
                        graph.setItemState(nodeItem, 'click', true); // 设置当前节点的 click 状态为 true
                    });

                }
                return {
                    selectNode,
                    show,
                    printData,
                    tags
                }
            }
        }).use(ElementPlus).mount('#node-info')

    </script>
</body>

</html>